<template>
  <t-tabs v-model="tabValue">
    <t-tab-panel value="1" label="工法信息">
      <t-form ref="form"  class="step-form"
              labelWidth="120px" :colon="true">
        <t-row style="flex: 1">
          <t-col :span="12">
            <t-form-item label="工法名称" name="name">
              {{objData.name}}
            </t-form-item>
            <t-form-item label="工法级别" name="level">
              {{objData.level | filterByDict(dict.type.construct_method_level)}}
            </t-form-item>
            <t-form-item label="获得时间" name="obtainDate">
             {{objData.obtainDate}}
            </t-form-item>
            <t-form-item label="关键词" name="keyWord">
              {{objData.keyWord}}
            </t-form-item>
            <t-card class="step-card" size="small" title="编制单位">
              <t-form-item  label-width="0" label="编制单位" name="companyList">
                <gf-company :edit-open="false"  ref="gf-company" v-model="objData.companyList"></gf-company>
              </t-form-item>
            </t-card>
            <t-card class="step-card" size="small" title="编制人员">
              <t-form-item label-width="0" label="编制人员" name="memberList">
                <gf-member  ref="gf-member" v-model="objData.memberList" :editOpen="false"></gf-member>
              </t-form-item>
            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel value="2" label="前言">
<!--      <div v-html="objData.constructMethodPreface?.content"></div>-->
      <inner-html :content="objData.constructMethodPreface?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="3" label="特点">
<!--      <div v-html="objData.constructMethodFeature?.content"></div>-->
      <inner-html :content="objData.constructMethodFeature?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="4" label="适用范围">
<!--      <div v-html="objData.constructMethodScope?.content"></div>-->
      <inner-html :content="objData.constructMethodScope?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="5" label="工艺原理">
<!--      <div v-html="objData.constructMethodPrinciple?.content"></div>-->
      <inner-html :content="objData.constructMethodPrinciple?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="6" label="施工工艺流程及操作要点">
<!--      <div v-html="objData.constructMethodProcess?.content"></div>-->
      <inner-html :content="objData.constructMethodProcess?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="7" label="材料与设备">
<!--      <div v-html="objData.constructMethodEquipment?.content"></div>-->
      <inner-html :content="objData.constructMethodEquipment?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="8" label="质量控制">
<!--      <div v-html="objData.constructMethodQuality?.content"></div>-->
      <inner-html :content="objData.constructMethodQuality?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="9" label="安全措施">
<!--      <div v-html="objData.constructMethodMeasure?.content"></div>-->
      <inner-html :content="objData.constructMethodMeasure?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="10" label="环保措施">
<!--      <div v-html="objData.constructMethodEnvironment?.content"></div>-->
      <inner-html :content="objData.constructMethodEnvironment?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="11" label="效益分析">
<!--      <div v-html="objData.constructMethodBenefit?.content"></div>-->
      <inner-html :content="objData.constructMethodBenefit?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="12" label="应用实例">
<!--      <div v-html="objData.constructMethodApplication?.content"></div>-->
      <inner-html :content="objData.constructMethodApplication?.content"></inner-html>

    </t-tab-panel>
    <t-tab-panel value="13" label="项目来源">
      <gf-project :objId="objId" ref="gf-project" v-model="objData.projectList"
                        :editOpen="false"></gf-project>
    </t-tab-panel>
    <t-tab-panel value="14" label="附件信息">
      <t-table  row-key="id" :columns="projectFileColumns" :data="projectFileData">
        <template #id="{row, rowIndex}">
          {{ rowIndex+1 }}
        </template>
        <template #c1="{row}">
          <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
          <div v-else>{{ row.c1 }}</div>
        </template>
        <template  #op="{row}">
          <div v-for="(item,index) in row.fileLists" :key="index">
            <a class="t-button-link" target="_blank" :href="item.url" >
              {{item.name}}
            </a>
          </div>
        </template>
      </t-table>
    </t-tab-panel>
  </t-tabs>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import {getFiles} from "@/api/common";
import gfMember from "./gf-member.vue";
import gfCompany from "./gf-company.vue";
import gfProject from "./gf-project.vue";
import InnerHtml from "@/components/InnerHtml/index.vue";


export default {
  name: "gf-detail",
  dicts: ['cg_key_word', 'construct_method_level'],
  components:{
    gfMember,
    gfCompany,
    gfProject,
    InnerHtml
  },
  props:{
    objId: [String,Number],
  },
  data() {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      tabValue: '1',
      objData:{
        constructMethodApplication: {},
        constructMethodBenefit: {},
        constructMethodEnvironment: {},
        constructMethodEquipment: {},
        constructMethodFeature: {},
        constructMethodMeasure: {},
        constructMethodPreface: {},
        constructMethodPrinciple: {},
        constructMethodProcess: {},
        constructMethodQuality: {},
        constructMethodScope: {}
      },
      projectFileData: [
        {
          id: 1,
          c1: "工法附件",
          c2: "是",
          moduleKey: "gfFJ",
          fileIds: [],
          fileLists: [],
          require: true,
        },
      ],
      projectFileColumns: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "c1",
          title: "附件名称",
          align: "center",
        },
        {
          colKey: "c2",
          title: "是否必需",
          align: "center",
        },
        {
          colKey: "op",
          title: "附件列表",
          align: "left",
        },
      ],
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj(val);
        }
      }
    },
  },
  methods:{
    getObj(){
      // 获取项目附件
      getFiles(this.objId).then((res) => {
        const files = {}
        res.data.forEach((item) => {
          if (!files[item.moduleKey]) {
            files[item.moduleKey] = []
          }
          files[item.moduleKey].push({
            name: item.fileName,
            url: item.fullFilePath,
            id: item.id,
            filePath: item.filePath
          })
        })
        this.projectFileData.forEach((val,index)=>{
          this.projectFileData[index].fileLists = files[val.moduleKey] || [];
          this.projectFileData[index].fileIds = files[val.moduleKey]?.map(val => val.id) || [];
        })

      }).catch((e) => {
        this.$message.error(e.toString());
      });
      this.$api.cgzh.gf.getAll(this.objId).then(response => {
        this.objData = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel{
  padding: 10px;
}
.t-form__item{
  margin-bottom:6px
}
.step-card {
  height: 100%;
  margin-bottom: 14px;
  padding-bottom: 14px;
}
</style>
